<template>
    <div>
        <Card>
            <p slot="title">
                {{containerTitle}}
            </p>
            <Form ref="formData" :model="formData" :rules="ruleCustom" :label-width="100">
                <FormItem label="广告名称" prop="ad_name">
                    <Input v-model="formData.ad_name" placeholder="请输入广告名称" :disabled="containerKey=='check'"
                           class="wid300 bcolor"/>
                </FormItem>
                <FormItem label="广告标识" prop="ad_type">
                    <Select v-model="formData.ad_type" class="wid300" placeholder="请选择广告分类" :disabled="!!id">
                        <Option v-for="item in ad_options" :value="item.id" :key="item.id">{{ item.ad_name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="广告区域" v-if="isloaded">
                    <procity-checkbox :node-click="isClick" :city-node.sync="checkTreeData"
                                      :select-arr.sync="selectArr"></procity-checkbox>
                </FormItem>
                <FormItem label="广告类型">
                    <RadioGroup v-model="formData.type">
                        <Radio :label="1" :disabled="containerKey=='check'">
                            单图
                        </Radio>
                        <Radio :label="2" :disabled="containerKey=='check'">
                            多图
                        </Radio>
                    </RadioGroup>
                </FormItem>
                <!-- 幻灯片 -->
                <div class="pic_view" v-for="(item,index) in slide_img_list">
                    <FormItem :label="'幻灯片图片'+(index+1)">
                      <span @click="getIndex(index)">
                          <dogo-upload :parent_file_list="item.slide_file_list" :is_check="containerKey"
                                       @listenChildUploadFileEvent="slideEvent"
                                       @listenChildRemoveFileEvent="listenChildRemoveFileEvent">
                          </dogo-upload>
                      </span>
                    </FormItem>
                    <FormItem :label="'图片名称'+(index+1)">
                        <Input v-model="item.title" placeholder="图片名称" class="wid300"
                               :disabled="containerKey=='check'"/>
                    </FormItem>
                    <FormItem :label="'链接地址'+(index+1)">
                        <Input v-model="item.link_url" placeholder="链接地址" class="wid300"
                               :disabled="containerKey=='check'"/>
                    </FormItem>
                    <FormItem :label="'跳转类型'+(index+1)">
                        <Select v-model="item.join_id" class="wid300" :disabled="containerKey=='check'"
                                @on-change="join_type_change(item.join_id,index)">
                            <Option v-for="item in join_list" :value="item.id" :key="item.id">
                                {{ item.name }}
                            </Option>
                        </Select>
                    </FormItem>
                    <FormItem :label="'跳转指向'+(index+1)" v-if="containerKey=='check'">
                        <div class="copy_input" style="background-color: #f3f3f3" v-if="item.join_id!==1">
                            <span style="color:#bbbec4">{{item.join_type.name}}</span>
                        </div>
                        <Cascader class="wid300" :data="goods_class_data" change-on-select disabled
                                  v-model="item.class_id" v-if="item.join_id===1"></Cascader>
                    </FormItem>
                    <FormItem :label="'跳转指向'+(index+1)" v-else>
                        <div class="copy_input" @click="show_model(item.join_id,index)" v-if="item.join_id!==1">
                            <span v-if="item.join_type.name">{{item.join_type.name}}</span>
                            <span style="color:#bbbec4" v-else>{{join_type_tip}}</span>
                        </div>
                        <Cascader class="wid300" :data="goods_class_data"
                                  change-on-select
                                  v-model="item.class_id" v-if="item.join_id===1"></Cascader>
                    </FormItem>
                    <FormItem :label="'简介'+(index+1)">
                        <Input v-model="item.description" placeholder="简介" type="textarea"
                               :disabled="containerKey=='check'" class="wid300"/>
                    </FormItem>
                    <FormItem :label="'排序'+(index+1)">
                        <InputNumber :min="1" v-model="item.sort" :disabled="containerKey=='check'"></InputNumber>
                    </FormItem>
                    <Button v-if="formData.type==2 && containerKey!='check'" @click="del_pic(item.join_id,index)"
                            class="del_pic" type="error"
                            shape="circle" icon="ios-trash-outline">
                    </Button>
                </div>
                <p class="clearfix" style="padding:10px 14px 0;" v-if="formData.type==2 && containerKey!='check'">
                  <span type="text" class="create_btn" @click="create_slide">
                      <Icon type="plus-round">
                      </Icon>
                      新建幻灯片
                  </span>
                    <!-- <span style="color:#ed3f14;font-size:12px;">
                        注意：最多只可创建10张幻灯片
                    </span> -->
                </p>
                <!-- 幻灯片End -->
                <FormItem>
                    <Button v-if="containerKey!='check'" class="submitBtn" type="primary"
                            @click="handleSubmit('formData')">
                        提交
                    </Button>
                    <Button style="margin-left:10px;  margin-top: 10px;" @click="$router.back()">返回</Button>
                </FormItem>
            </Form>
        </Card>

        <Modal width="1000"
               :closable="false"
               :mask-closable="false"
               v-model="join_type_model"
               :title="join_type_tip"
               @on-ok="selOk"
               @on-cancel="selCancel">
            <div class="sear_view">
                <!-- //this.join_id==2 -->
                <template v-if="join_id==2">
                    <Input v-model="goods_name_key" placeholder="请输入商品名称" class="wid200"/>
                    <i-button type="primary" @click="searchfn">搜索</i-button>
                </template>
                <template v-if="join_id==3">
                    <Input v-model="shop_key" placeholder="请输入店铺名称" class="wid200"/>
                    <i-button type="primary" @click="searchfn">搜索</i-button>
                </template>
            </div>
            <i-table border :columns="modal_columns" :data="modal_data"></i-table>
            <Page :total="total_count" :current="page" class="page_view" @on-change="page_change"></Page>
        </Modal>
    </div>
</template>
<script>
    import upload_image from '@/views/my-components/upload/upload_image.vue';
    import provincecitycheckbox from '@/views/my-components/ProvinceCitysCheckbox.vue';
    import {get_local_user_proxy} from '@/utils/config_common.js';

    export default {
        components: {
            'dogo-upload': upload_image,
            'procity-checkbox': provincecitycheckbox
        },
        props: {
            containerId: [String],
            containerTitle: [String],
            containerKey: [String]
        },

        data () {
            return {
                shop_key: '',
                goods_name_key: '',
                img_index: '',
                totals_count: 0,
                totalg_count: 0,
                total_count: 0,
                join_type_tip: '请选择',
                checkTreeData: [],
                join_type_model: false,
                modal_columns: [],
                modal_data: [],
                goods_class_data: [],
                shop_list: [],
                goods_data: [],
                page: 1,
                pre_page: 10,
                join_list: [
                    {id: 1, name: '分类'},
                    {id: 2, name: '商品'},
                    {id: 3, name: '店铺'}
                ],
                formData: {
                    ad_name: '',
                    ad_type: '',
                    data: '',
                    type: 1
                },
                show_type: 0,
                slide_img_list: [
                    {
                        ad_image: '',
                        slide_file_list: [] /**图片文件 */,
                        link_url: '' /**链接地址 */,
                        sort: 1 /**排序 */,
                        join_type: {name: '', id: ''},
                        class_id: [],
                        join_id: '',
                        description: '',
                        title: '',
                        join_type_key: '',
                        join_type_tag: ''
                    }
                ],
                url_value: '',
                img_file_list: [],
                formCustom: {},
                ruleCustom: {
                    ad_name: [
                        {required: true, message: '广告名称不能为空', trigger: 'blur'}
                    ]
                },
                pic_index: '',
                id: '',
                join_id: '',
                goods_columns: [
                    {
                        title: '商品名称',
                        key: 'goods_name',
                        align: 'center'
                    },
                    // {
                    //     title: '价格',
                    //     key: 'price',
                    //     align: 'center'
                    // },
                    {
                        title: '库存',
                        key: 'stock',
                        align: 'center'
                    },
                    {
                        title: '销量',
                        key: 'sales',
                        align: 'center'
                    },
                    {
                        title: '排序',
                        key: 'sort',
                        align: 'center'
                    },
                    {
                        title: '操作',
                        key: 'handel',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type:
                                                this.slide_img_list[this.img_index].join_type_tag ==
                                                params.row.goods_id
                                                    ? 'primary'
                                                    : 'info'
                                        },
                                        on: {
                                            click: () => {
                                                this.slide_img_list[this.img_index].join_type_tag =
                                                    params.row.goods_id;
                                                this.slide_img_list[this.img_index].join_type_key =
                                                    params.row.goods_name;
                                            }
                                        }
                                    },
                                    this.slide_img_list[this.img_index].join_type_tag ==
                                    params.row.goods_id
                                        ? '已选择'
                                        : '选择'
                                )
                            ]);
                        }
                    }
                ],
                shop_columns: [
                    {
                        title: '店铺名称',
                        key: 'shop_name',
                        align: 'center'
                    },
                    {
                        title: '店主账号',
                        key: 'company_phone',
                        align: 'center'
                    },
                    {
                        title: '店主公司名',
                        key: 'company_name',
                        align: 'center'
                    },
                    // {
                    //     title: '店铺余额',
                    //     key: 'balance',
                    //     align: 'center'
                    // },
                    // {
                    //     title: '店铺状态',
                    //     align: 'center',
                    //     key: 'status_info',
                    //     render: (h, params) => {
                    //         let text = '';
                    //         switch (params.row.shop_state) {
                    //             case 1:
                    //                 text = '开启';
                    //                 break;
                    //             case 2:
                    //                 text = '审核中';
                    //                 break;
                    //             default:
                    //                 text = '关闭';
                    //
                    //         }
                    //         return h('span', text);
                    //     }
                    // },
                    {
                        title: '开店时间',
                        align: 'center',
                        width: 150,
                        key: 'created_at',
                        sortable: true,
                        render: (h, params) => {
                            let text = '';
                            if (params.row.created_at) {
                                text = this.$formatTime(parseInt(new Date(params.row.created_at).getTime()) / 1000);
                            }
                            return h('span', text);
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        width: 250,
                        key: 'handle',
                        render: (h, params) => {
                            return h('div', [
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type:
                                                this.slide_img_list[this.img_index].join_type_tag ==
                                                params.row.id
                                                    ? 'primary'
                                                    : 'info'
                                        },
                                        style: {
                                            marginRight: '10px'
                                        },
                                        on: {
                                            click: () => {
                                                this.slide_img_list[this.img_index].join_type_tag =
                                                    params.row.id;
                                                this.slide_img_list[this.img_index].join_type_key =
                                                    params.row.shop_name;
                                            }
                                        }
                                    },
                                    this.slide_img_list[this.img_index].join_type_tag ==
                                    params.row.id
                                        ? '已选择'
                                        : '选择'
                                )
                            ]);
                        }
                    }
                ],
                ad_options: [],
                isloaded: false,
                selectArr: {
                    provinces: [],
                    citys: [],
                    districts: []
                },
                isClick: true// 地区选择是否能够点击
            };
        },
        async created () {
            this.get_region_list();
            this.get_goods_list();
            this.get_shop_list();
            await this.get_goods_class();
            this.getAdType();
            this.id = this.containerId;
            this.isClick = (this.containerKey != 'check') ? true : false;
            if (this.id) {
                this.getDetail();
            }
            this.ruleCustom = (this.containerKey != 'check') ? this.ruleCustom : {};

        },
        methods: {
            // 获取广告分类信息
            getAdType () {
                let opts = {
                    url: `${this.$hostUrl.nodehost}${this.$configApi.ad_type.url}`,
                    method: this.$configApi.ad_type.method
                };

                this.$axios({
                    method: opts.method,
                    url: opts.url,
                    data: {}
                }).then(res => {
                    res = res.data;
                    if (res.code == 200) {
                        this.ad_options = res.data;
                        let tmp = {};
                        res.data.forEach(item => {
                            tmp[item.id] = item.ad_name;
                        });
                        this.tmpObj = tmp;
                    } else {
                        this.ad_options = [];
                        this.tmpObj = {};
                    }
                });
            },
            searchfn () {
                this.page = 1;
                switch (this.join_id) {
                    case 2:
                        this.get_goods_list();
                        break;
                    case 3:
                        this.get_shop_list();
                        break;
                }
            },
            show_model (join_id, index) {
                if (!join_id) {
                    this.$Message.error('请选择跳转类型');
                    return false;
                }
                this.join_type_model = !this.join_type_model;
                this.join_id = join_id;
                this.model_data();
                this.img_index = index;
            },
            join_type_change (join_id, index) {
                this.join_id = join_id;
                this.img_index = index;
                this.slide_img_list[index].join_type.name = '';
                this.slide_img_list[index].join_type.id = '';
                this.model_data();
            },
            model_data () {
                switch (this.join_id) {
                    case 1:
                        this.join_type_tip = '请选择商品分类';
                        break;
                    case 2:
                        this.join_type_tip = '请选择商品';
                        this.modal_columns = this.goods_columns;
                        this.modal_data = this.goods_data;
                        this.total_count = this.totalg_count;
                        break;
                    case 3:
                        this.join_type_tip = '请选择店铺';
                        this.modal_columns = this.shop_columns;
                        this.modal_data = this.shop_list;
                        this.total_count = this.totals_count;
                        break;
                }
            },

            /**页码改变的回调，返回改变后的页码 */
            page_change (val) {
                this.page = val;
                // this.get_data_list();
                switch (this.join_id) {
                    case 2:
                        this.get_goods_list();
                        break;
                    case 3:
                        this.get_shop_list();
                        break;
                }
            },
            del_pic (join_id, index) {
                if (this.slide_img_list.length <= 1) {
                    return false;
                }
                this.slide_img_list.splice(index, 1);
                if (this.slide_img_list[index]) {
                    this.img_index = index;
                } else {
                    this.img_index = index - 1;
                }
                this.formData.type = (this.slide_img_list.length > 1) ? 2 : 1;
            },
            getDetail () {
                this.slide_img_list = [];
                let opts = {
                    url: `${this.$hostUrl.nodehost}${this.$configApi.ad_detail.url}`,
                    method: this.$configApi.ad_detail.method
                };
                this.$Loading.start();
                this.$axios({
                    method: opts.method,
                    url: opts.url,
                    data: {id: this.id, proxy_id: get_local_user_proxy()}
                }).then(res => {
                    this.$Loading.finish();
                    res = res.data;
                    if (res.code == 200) {
                        let detail = res.data;
                        this.formData.ad_name = detail.ad_name;
                        this.formData.ad_type = detail.category_id;
                        this.formData.type = detail.data.length > 1 ? 2 : 1;
                        this.selectArr.provinces = detail.province_id ? detail.province_id.split(',') : [];
                        this.selectArr.citys = detail.city_id ? detail.city_id.split(',') : [];
                        this.selectArr.districts = detail.district_id ? detail.district_id.split(',') : [];
                        let slide_img_list = [];
                        detail.data.forEach((item, i) => {
                            let join_type = item.join_id.length == 1 ? {
                                name: '',
                                id: ''
                            } : JSON.parse(item.join_id);
                            if (!join_type.name) {
                                join_type.id = join_type.id.split(',').map(itemC => {
                                    itemC = parseInt(itemC);
                                    return itemC;
                                });
                            }
                            slide_img_list.push({
                                id: item.id,
                                ad_image: item.ad_image,
                                slide_file_list: [
                                    {
                                        name: item.ad_name,
                                        url: item.ad_image,
                                        percentage: 100,
                                        status: 'finished',
                                        uid: '1521004507244'
                                    }
                                ] /**图片文件 */,
                                link_url: item.link_url,
                                sort: item.sort,
                                join_type: join_type,
                                join_id: parseInt(item.join_type),
                                description: item.description,
                                title: item.pic_name,
                                join_type_key: join_type.name,
                                join_type_tag: join_type.id,
                                class_id: !join_type.name ? join_type.id : []
                            });
                        });
                        if (slide_img_list.length) {
                            this.slide_img_list = slide_img_list;
                        } else {
                            this.slide_img_list = [
                                {
                                    id: '',
                                    ad_image: '',
                                    slide_file_list: [] /**图片文件 */,
                                    link_url: '' /**链接地址 */,
                                    sort: 1 /**排序 */,
                                    join_type: {name: '', id: ''},
                                    class_id: [],
                                    join_id: '',
                                    description: '',
                                    title: '',
                                    join_type_key: '',
                                    join_type_tag: ''
                                }
                            ];
                        }
                    } else {
                        this.$Message.error(res.message);
                    }
                });

            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let vaList = false;
                        if (this.formData.ad_type == '') {
                            this.$Message.error('广告标识不能为空！');
                            return;
                        }
                        for (let i = 0; i < this.slide_img_list.length; i++) {
                            const {ad_image, class_id, title, join_id, join_type = {}} = this.slide_img_list[i];
                            if (!ad_image) {
                                vaList = `请上传幻灯片图片${i + 1}`;
                                break;
                            }
                            if (!title) {
                                vaList = `请输入图片名称${i + 1}`;
                                break;
                            }
                            if (!join_id) {
                                vaList = `请选择跳转类型${i + 1}`;
                                break;
                            }
                            if (parseInt(join_id) === 1) {
                                if (!class_id.length) {
                                    vaList = `请选择跳转指向${i + 1}`;
                                    break;
                                }
                            } else {
                                const {id = '', name = ''} = join_type;
                                if (!id || !name) {
                                    vaList = `请选择跳转指向${i + 1}`;
                                    break;
                                }
                            }
                        }
                        if (vaList) {
                            this.$Message.error(vaList);
                            return;
                        }
                        let data = [];
                        this.slide_img_list.forEach(item => {
                            if (item.join_id === 1) {
                                item.join_type.id = item.class_id.join(',');
                            }
                            data.push({
                                id: item.id,
                                ad_image: item.ad_image,
                                link_url: item.link_url,
                                sort: item.sort,
                                type: this.show_type,
                                join_type: item.join_type,
                                join_id: item.join_id,
                                description: item.description,
                                title: item.title
                            });
                        });
                        this.formData.data = JSON.stringify(data);
                        let opts;
                        if (this.id) {
                            opts = {
                                url: `${this.$hostUrl.nodehost}${this.$configApi.ad_update.url}`,
                                method: this.$configApi.ad_update.method
                            };
                        } else {
                            opts = {
                                url: `${this.$hostUrl.nodehost}${this.$configApi.ad_save.url}`,
                                method: this.$configApi.ad_save.method
                            };
                        }
                        let params = this[name];
                        params.id = this.id;
                        if (this.selectArr.provinces.length == 0) {
                            this.$Message.error('请选择广告区域');
                            return;
                        }
                        params.province_id = this.selectArr.provinces.join(',');
                        params.city_id = this.selectArr.citys.join(',');
                        params.district_id = this.selectArr.districts.join(',');
                        params.proxy_id = get_local_user_proxy();
                        this.$axios({
                            method: opts.method,
                            url: opts.url,
                            data: params
                        }).then(res => {
                            this.$Loading.finish();
                            res = res.data;
                            if (res.code == 200) {
                                this.$Message.success(res.msg);
                                this.$router.back();
                            } else {
                                this.$Message.error(res.msg);
                            }
                        });

                    }
                });

            },
            getIndex (index) {
                this.pic_index = index;
            },
            slideEvent (data) {
                this.slide_img_list[this.pic_index].ad_image = data.file_path;
                this.slide_img_list[this.pic_index].title = data.file_name;
                this.slide_img_list[this.pic_index].slide_file_list = [
                    {
                        name: data.file_name,
                        url: data.file_path,
                        percentage: 100,
                        status: 'finished',
                        uid: '1521004507244'
                    }
                ];
            },
            listenChildRemoveFileEvent () {
                this.slide_img_list[this.pic_index].ad_image = '';
                this.slide_img_list[this.pic_index].title = '';
                this.slide_img_list[this.pic_index].slide_file_list = [];
            },
            create_slide () {
                if (this.slide_img_list.length < 10) {
                    this.slide_img_list.push({
                        ad_image: '',
                        slide_file_list: [] /**图片文件 */,
                        link_url: '' /**链接地址 */,
                        sort: this.slide_img_list.length + 1 /**排序 */,
                        join_type: {name: '', id: ''},
                        class_id: [],
                        join_id: '',
                        join_type_key: '',
                        join_type_tag: ''
                    });
                }
            },
            /**获取商品分类列表 */
            async get_goods_class () {
                let opts = {
                    url: `${this.$hostUrl.nodehost}${this.$configApi.manage_goods_list.url}`,
                    method: this.$configApi.manage_goods_list.method
                };
                await this.$axios({
                    method: opts.method,
                    url: opts.url,
                    params: {}
                })
                    .then(res => {
                        this.$Loading.finish();
                        res = res.data;
                        if (res.code === 200) {
                            let goods_class_data = res.data;
                            this.goods_class_data = (function di (data) {
                                return data.map(item => {
                                    const {category_id, category_name, children = []} = item;
                                    const tmp = {
                                        value: category_id,
                                        label: category_name,
                                    };
                                    if (children.length) {
                                        return {...item, ...tmp, children: di(children)};
                                    } else {
                                        return {...item, ...tmp};
                                    }
                                });
                            })(goods_class_data);
                        } else {
                            this.$Message.error(res.message);
                        }
                    });

            },
            /** 区域列表 */
            get_region_list () {
                let opts = {
                    url: `${this.$hostUrl.cloud_host_v2}${this.$configApi.region_list.url}`,
                    method: this.$configApi.region_list.method
                };
                let params = {};
                this.$axios({
                    method: opts.method,
                    url: opts.url,
                    params: params
                }).then(res => {
                    let tmpres = res.data;
                    if (tmpres.status == 200) {
                        //匹配用户管辖数据
                        const proxyDataString = localStorage.getItem('area_proxy_data') || '';
                        const proxyData = JSON.parse(proxyDataString);
                        const {city_id = '', district_id = '', province_id = ''} = proxyData;
                        const cityIdArray = city_id.split(',');
                        const districtIdArray = district_id.split(',');
                        const provinceIdArray = province_id.split(',');
                        const di = (data, level = 1) => {
                            const areaArray = level === 1 ? provinceIdArray : level === 2 ? cityIdArray : districtIdArray;
                            return data.reduce((containe, item) => {
                                let {value, children = []} = item;
                                if (children.length) {
                                    children = di(children, level + 1);
                                }
                                const isHas = areaArray.includes(`${value}`) || children.length;
                                if (isHas) {
                                    containe.push({...item, children});
                                }
                                return containe;
                            }, []);
                        };
                        const data = di(tmpres.result);
                        data.forEach(item => {
                            item.expand = false;
                        });
                        this.checkTreeData = data;
                    } else {
                        this.checkTreeData = [];
                    }
                    this.isloaded = true;
                });
            },
            /** 店铺列表 */
            get_shop_list () {
                let opts = {
                    url: `${this.$hostUrl.nodehost}${this.$configApi.shop_list.url}`,
                    method: this.$configApi.shop_list.method
                };
                let params = {
                    page: this.page,
                    pre_page: this.pre_page,
                    name: this.shop_key
                };

                this.$axios({
                    method: opts.method,
                    url: opts.url,
                    params: params
                }).then(res => {
                    res = res.data;
                    if (res.code == 200) {
                        this.shop_list = res.data;
                        this.totals_count = res.total_count;
                        this.model_data();
                    } else {
                        this.shop_list = [];
                        this.$Message.error(res.message);
                    }
                });

            },
            /**获取商品列表 */
            get_goods_list () {
                let opts = {
                    url: this.$configApi.cloud_goods.url,
                    method: this.$configApi.cloud_goods.method
                };
                let params = {
                    page: this.page,
                    pre_page: this.pre_page,
                    goods_name: this.goods_name_key,
                };
                this.$axios({
                    method: opts.method,
                    url: opts.url,
                    params: params
                })
                    .then(res => {
                        this.$Loading.finish();
                        res = res.data;
                        if (res.status == 200) {
                            this.goods_data = res.result;
                            this.totalg_count = res.total_count;
                            this.model_data();
                        } else {
                            this.goods_data = [];
                            this.$Message.warning(res.message);
                        }
                    });
            },
            selOk () {
                this.slide_img_list[this.img_index].join_type.id = this.slide_img_list[
                    this.img_index
                    ].join_type_tag;
                this.slide_img_list[this.img_index].join_type.name = this.slide_img_list[
                    this.img_index
                    ].join_type_key;
                //  this.slide_img_list[this.img_index].join_type =this.join_type_tag;
            },
            selCancel () {
                this.page = 1;
                this.slide_img_list[this.img_index].join_type_tag = this.slide_img_list[
                    this.img_index
                    ].join_type.id;
                this.slide_img_list[this.img_index].join_type_key = this.slide_img_list[
                    this.img_index
                    ].join_type.name;
            }
        }
    };
</script>
<style>
    .pic_view {
        position: relative;
        border-bottom: 1px solid #eee;
        margin-top: 10px;
    }

    .del_pic {
        position: absolute;
        top: 35%;
        left: 600px;
    }

    .create_btn {
        color: #5cadff;
        cursor: pointer;
        font-size: 12px;
        padding-top: 0 12px;
    }

    .create_btn:hover {
        color: #2b85e4;
    }

    .copy_input {
        width: 300px;
    }

    .page_view {
        margin-top: 10px;
    }

    .submitBtn {
        margin-top: 10px;
    }

    .sear_view {
        margin-bottom: 10px;
    }

    .ics ~ ul {
        display: inline-block;
    }

    .firsts ~ ul {
        display: inline-block;
    }


</style>


